<template>
	<view class="">
		<image src="/static/work1.jpg" mode="" class="img_bg " style="top: 0;"></image>


		<view class="">
			<view class="margin-r30 margin-l30">
				<view class="" style="border-radius: 5%;">
					<view class="" style="position: relative; display: flex; justify-content: space-between; ">
						<wyb-drop-down ref="dropDown" style="width: 100%;" :options="options" @change="onHeaderSelect" @select="onItemSelect" >
							<!-- 自定义模式开启时，这里可以放内容 -->
						</wyb-drop-down>
						<uni-search-bar clearButton='none' placeholder="巡检人" style="position: absolute; left: 50%; width: 50%;" @input="input"></uni-search-bar>
					</view>
					<view class="" style="position: relative; display: flex; justify-content: space-between;">
						<uni-search-bar clearButton='none' placeholder="班次名称" style="width: 50%;" @input="inputInspection"></uni-search-bar>
						<uni-search-bar clearButton='none' placeholder="风险点名称" style="width: 50%" @input="inputDanger"></uni-search-bar>
					</view>
				</view>
				<block v-for="(item,index) in list" :key="index">
					<view class="card margin-t30 relative" @tap="toDetail(item.id,item.add_time,item.status)">
						<view :class="item.status=='1'?'jiaobiao':'jiaobiao2'">
							{{item.status==1?zhuangtai:yichang}}
						</view>
						<view class="text-36">{{item.danger_name?item.danger_name:"-"}}</view>
						<view class="display justify-between margin-t22">

							<view class="font-gray1">巡检时间</view>
							<view :class="item.danger_level==1?'font-0':item.danger_level==2?'font-1':item.danger_level==3?'font-2':item.danger_level==4?'font-3':''">{{item.add_time?item.add_time:"-"}}</view>
						</view>
						<view class="display justify-between margin-t22">
							<view class="font-gray1 ">巡检人</view>
							<view :class="item.danger_level==1?'font-0':item.danger_level==2?'font-1':item.danger_level==3?'font-2':item.danger_level==4?'font-3':''">{{item.userinfo.nickname?item.userinfo.nickname:"-"}}</view>
						</view>
						<view class="display justify-between margin-t22">
							<view class="font-gray1 ">所在班次</view>
							{{item.inspection_name}}
						</view>
						<view class="display justify-between margin-t22">
							<view class="font-gray1 ">所属部门</view>
							<view :class="item.danger_level==1?'font-0':item.danger_level==2?'font-1':item.danger_level==3?'font-2':item.danger_level==4?'font-3':''">{{item.userinfo.position_name?item.userinfo.position_name:"公司"}}</view>
						</view>
					</view>
				</block>

				<view class="loading">
					{{loadingText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue' 
	var page = 1,
		timer;
	export default {
		components: {
			uniSearchBar,
			wybDropDown
		},
		data() {
			return {
				uid: '',
				token: '',
				list: [],
				zhuangtai: '正常',
				yichang: '异常',
				loadingText: '上拉加载更多',
				options: [{
					header: '巡检状态',
					// contents在自定义开启时可以不用传
					contents: ['默认', '正常', '异常'],
					// custom: true // 该栏目开启自定义模式
				}],
				status: '', //巡检状态
				inspection_user: '', // 巡检人,
				inspection_name: '', // 班次名称
				danger_name: '', // 风险点名称（可模糊查询）

			}
		},
		onLoad() {
			var _self = this
			this.uid = uni.getStorageSync('user').uid;
			this.token = uni.getStorageSync('user').token;
			this.getXunjian();
		},
		onPullDownRefresh: function() {
			this.getXunjian();
		},
		onReachBottom: function() {
			let that = this
			if (timer != null) {
				clearTimeout(timer)
			}
			timer = setTimeout(function() {
				that.getNewXunjian();
			}, 500);
		},
		methods: {
			getXunjian() {
				page = 1;
				var _self = this
				uni.showNavigationBarLoading();
				this.loadingText = '上拉加载更多'
				uni.request({
					url: 'https://aqmore.sxpz.vip/AppApi/SafetyInspection/getInspectionList?uid=' + this.uid + '&token=' + this.token +
						'&p=' + page + '&status=' + this.status + '&inspection_user=' + this.inspection_user + '&inspection_name=' +
						this.inspection_name + '&danger_name=' + this.danger_name,
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						console.log(res)
						if (res.data.code == 100) {
							console.log(res)
							uni.showToast({
								title: res.data.datas.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
								try {
									uni.removeStorageSync('user');
									console.log('chenggonmg')
								} catch (e) {
									// error
								}
							}, 1500)
						}
						if (res.data.code == 200) {
							_self.list = res.data.datas.inspection_list
							console.log(_self.list)
							uni.stopPullDownRefresh();
							uni.hideNavigationBarLoading();
							page++;
						}
					}
				})
			},
			getNewXunjian() {
				var _self = this
				if (this.loadingText == '已经加载全部巡检记录') {
					return false
				}
				this.loadingText = '加载中...'
				uni.showNavigationBarLoading();
				uni.request({
					url: 'https://aqmore.sxpz.vip/AppApi/SafetyInspection/getInspectionList?uid=' + this.uid + '&token=' + this.token +
						'&p=' + page + '&status=' + this.status + '&inspection_user=' + this.inspection_user + '&inspection_name=' +
						this.inspection_name + '&danger_name=' + this.danger_name,
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						uni.hideNavigationBarLoading();
						if (res.data.datas.inspection_list.length == 0) {
							_self.loadingText = '已经加载全部巡检记录';
							return false
						}
						var newlist = res.data.datas.inspection_list
						_self.list = _self.list.concat(newlist)
						console.log(_self.list)
						page++;
					}
				})
			},
			toDetail(e, f, g) { //f为时间  g为状态 正常或异常
				uni.navigateTo({
					url: 'formDetail?id=' + e + '&time=' + f + '&zhuangtai=' + g
				})
			},
			onHeaderSelect(res1) {
				console.log(res1)
			},
			onItemSelect(res2) {
				console.log(res2)
				this.$refs.dropDown.close()
				this.status = res2.contentIndex
				console.log(this.inspection_user) // 巡检人,
				console.log(this.inspection_name) // 班次名称
				console.log(this.danger_name),
					this.getXunjian()
			},
			input(res3) {
				console.log(res3)
				this.inspection_user = res3.value
				console.log(this.inspection_user) // 巡检人,
				console.log(this.inspection_name) // 班次名称
				console.log(this.danger_name),
					this.getXunjian()
			},
			inputInspection(res4) {
				console.log(res4)
				this.inspection_name = res4.value
				console.log(this.inspection_user) // 巡检人,
				console.log(this.inspection_name) // 班次名称
				console.log(this.danger_name),
					this.getXunjian()
			},
			inputDanger(res5) {
				console.log(res5)
				this.danger_name = res5.value
				console.log(this.inspection_user) // 巡检人,
				console.log(this.inspection_name) // 班次名称
				console.log(this.danger_name),
					this.getXunjian()
			}

		}
	}
</script>

<style>
	page {
		margin: 0;
		padding: 0;
		/* background-color: #0d98ed; */
	}

	.jiaobiao {
		position: absolute;
		height: 50upx;
		width: 80upx;
		right: 0;
		font-size: 100%;
		background-color: #00aa00;
		color: #FFFFFF;
		top: -3upx;
		border-radius: 10%;
		text-align: center;
	}

	.jiaobiao2 {
		position: absolute;
		height: 50upx;
		width: 80upx;
		right: 0;
		font-size: 100%;
		background-color: #ff0000;
		color: #FFFFFF;
		top: -3upx;
		border-radius: 10%;
		text-align: center;
	}

	.loading {
		line-height: 2em;
		text-align: center;
		color: #808080;
		margin-top: 30upx;
	}
</style>
